/* eslint-disable react/jsx-filename-extension */
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';
import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
import StepC from '@/src/comps/other/stepC/stepC';
import { PrimaryC } from '@/src/comps';

const StepDemo = () => {
  const [nowStep,setNowStep ] = useState(0)
  const [status,setStatus] = useState('process')//状态 wait process finish error
  const [visible,setVisible] = useState(false)


  const changeStep=()=>{
    setNowStep(1)
  }
  const changeStatus=()=>{
    setStatus('process')
  }
  const  changVisible=()=>{
    setVisible(!visible)
    setTimeout(() => {
     setNowStep(1)
    }, 2000);
    setTimeout(() => {
      // setNowStep(2)
      setStatus('error')
     }, 3000);
    //  setTimeout(() => {
    //   setStatus('finish')
    //   // setVisible(false)
    //  }, 5000);
    //  setTimeout(() => {
    //   setStatus('process')
    //   setNowStep(0)
    //  }, 6000);
  }
  const  onClose=()=>{
    setVisible(false)
    setStatus('process')
    setNowStep(0)
  }
  return <div style={{padding:"10px"}}>
  <PrimaryC title={"点击可见"} onClick={changVisible}/>
  {/* <PrimaryC title={"修改进度"} onClick={changeStep}/>
  <PrimaryC title={"修改状态"} onClick={changeStatus}/> */}
  <StepC
    // size={'small'}
    status={status}
    nowStep={nowStep}
    visible={visible}
    onClose={onClose}
    items={[
      {
        title: '用户发起',
        disabled:true,
        icon:status=='process'&&nowStep==0?<LoadingOutlined />:undefined,
      },
      {
        title: '验资验券',
        disabled:true,
        icon:status=='process'&&nowStep==1?<LoadingOutlined />:undefined,
      },
      {
        title: '簿记下达',
        icon:status=='process'&&nowStep==2?<LoadingOutlined />:undefined,
        disabled:true,
      },
    ]} />
  </div>
};

export default StepDemo;
